<template>
	<view class="activity" v-if="shows == true">
		<view class="nav_title">
			<p class="text1">
				<view style="font-weight: bold;">军供优品</view>
				<!-- <image src="../../static/img/pintuan.png" mode=""></image> -->
			</p>
			<!-- <uni-countdown class="time_down" colors="#FFFFFF" :background-color="colors.color" :border-color="colors.color" :day="times.day" :hour="times.hours" :minute="times.minutes" :second="times.seconds" @timeup="hideShow"></uni-countdown> -->
			<van-count-down millisecond use-slot :time="times" format="HH:mm:ss:SSS" @change="onChange" class="countdown" @finish="hideShow">
				 <text class="item"  :style="{backgroundColor: colors.color}">{{ timeData.hours }}</text>: 
				  <text class="item"  :style="{backgroundColor: colors.color}">{{ timeData.minutes }}</text>: 
				  <text class="item"  :style="{backgroundColor: colors.color}">{{ timeData.seconds }}</text>: 
				  <text class="item"  :style="{backgroundColor: colors.color}">{{ timeData.milliseconds }}</text>
			</van-count-down>
			<text class="text2" @click="getmore">查看更多</text>
		</view>
		<scroll-view class="scroll-view" scroll-x scroll-with-animation="true" lower-threshold="20">
					<view class="hot_food" v-for="(item,index) in dataList" :key="index" @tap="jumpPintuan(item)">
						<image :src="item.img" mode=""></image>
						<view class="food_title">
							<p class="p1">
								<image :src="item.tag_img" mode="" v-if="item.tag_type==2"></image>
								<text class="hot" v-if="item.tag_type== 1" :style="{backgroundColor: colors.color}">{{item.tag_content}}</text>
								<text class="name">{{item.title}}</text>
							</p>
							<p class="p2">
							  <text class="text1" :style="{color: colors.color}">¥{{item.price || 0}}</text>
							 <!-- <text class="text2" v-if="item.disuse_price">
								  ¥{{item.disuse_price}}
							  </text> -->
							 </p>
						</view>
					</view>
		</scroll-view>
	</view>
</template>

<script>

import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	components: {
		uniCountdown
	},
	data(){
		return{
			shows: true,
			timeData: {},
		}
	},
	props:{
		colors:Object,
		dataList:Array,
		times:Number
	},
	methods:{
		getmore(){
			console.log(this.times);
			this.$Router.push({path:'/pagesA/pages/home/assemble'})
		},
		hideShow(){
			this.shows = false
		},
		jumpPintuan(item){
			console.log(item)
			this.$Router.push({path:'/pagesA/pages/goods/assembleDetails',query:{
				goodid: item.goods_id
			}})
		},
		onChange(e) {
		  e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0)
		  this.timeData = e.detail
		},
	}
};
</script>

<style lang="scss" scoped>
.activity {
	padding: 0 4%;
	margin-top: 20upx;
	overflow: hidden;
	margin-bottom: 30upx;
	transition: all 0.3s;
	.nav_title {
		height: 60upx;
		line-height: 60upx;
		position: relative;
		.text1 {
			float: left;
			// font-size: 34rpx;
			font-size: 36upx;
			color: #333333;
			margin-right: 20upx;
			image{
				height: 40upx;
				display: block;
				width: 80upx;
				margin-top: 10rpx;
			}
		}
		.text2 {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 28upx;
			color: #999999;
		}
	}
	.scroll-view{
		width: auto;
		// overflow: hidden;
		height: 295upx;
		overflow-x: scroll; /*添加横向滚动条*/
		white-space: nowrap; /*不换行*/
		.swipers{
			width:160upx;
			height: 295upx;
			display: inline-block;
		}
		.hot_food{
			overflow: hidden;
			margin-right: 20upx;
			margin-top: 20upx;
			// float: left;
			display: inline-block;
			box-shadow: 0upx 0upx 5upx #EEEEEE;
			padding: 10upx;
			box-sizing: content-box;
			image{
				width:160upx;
				height:160upx;
				border-radius:10upx;
			}
			.food_title{
				width:161upx;
				.p1{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size:28upx;
					color: #000000;
					height: 40upx;
					line-height: 45upx;
					image{
						width: 40upx;
						height: 40upx;
						float: left;
						margin-right: 10upx;
					}
					.hot{
						font-size: 20upx;
						height: 40upx;
						// line-height: 40upx;
						padding: 0upx 10upx;
						color: #FFFFFF;
						background-color: #F23A3A;
						border-radius: 8upx;
						margin-right: 10upx;
						float: left;
						box-sizing: border-box;
					}
				}
				.p2{
					margin-top: 10upx;
					width: 100%;
					.text1{
						font-size: 28upx;
						color: #F23A3A;
						float: left;
					}
					.text2{
						font-size:22upx;
						font-family:Droid Sans Fallback;
						font-weight:400;
						text-decoration:line-through;
						color:rgba(100,100,100,1);
						float: right;
						overflow: hidden;
						margin-top: 3upx;
					}
				}
			}
		}
	}
}
.item {
  display: inline-block;
  width: 22px;
  margin: 0 10upx;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #1989fa;
  border-radius: 2px;
  margin-top: 10upx;
}
</style>
<style lang="scss">
	.van-count-down{
		transform: translateY(5upx);
	}
</style>
